<!--
* @Author: 张昊
* @Date:  2022-01-18 14:31:43
* @FilePath: /components/text/txt-room-title.vue
* @Description: 房间管理 类型 标题
-->
<template>
	<u-transition :show="true" mode="fade-left">
		<u-skeleton rows="2" :loading="!list.perform.length" avatar :title="false">
			<view class="card room-top" @click="click">
				<view class="title">{{ list.title }}</view>
				<!-- <view class="border"></view> -->
				<view class="text"><txt-perform class="border-0" :perform="item" v-for="(item, index) in list.perform" :key="index" /></view>
			</view>
		</u-skeleton>
	</u-transition>
</template>

<script>
export default {
	name: 'txt-room-title',
	props: {
		list: {
			type: Object
		}
	},
	data() {
		return {
		};
	},
	methods: {
		click() {
			uni.$emit('performShow');
		}
	}
};
</script>

<style lang="scss" scoped>
.room-top {
	display: flex;
	align-items: center;
	height: 100%;
	.title {
		width: 150rem;
		font-size: $uni-font-title;
		font-weight: 600;
	}
	.border {
		width: 8rpx;
		height: 100%;
		background: #0086ff;
		border-radius: 4rpx;
		margin: 0 28rpx;
	}
	.text {
		width: 484rpx;
		border-left: 3px solid #0086ff;
		padding-left: 10px;
		/deep/ .unit-text {
			background-color: #007aff;
			width: 30rem !important;
		}
	}
}
</style>
